<template>
  <div class="di main-wrap" v-loading="audio.waiting">
    <!-- 这里设置了ref属性后，在vue组件中，就可以用this.$refs.audio来访问该dom元素 -->
    <audio ref="audio" class="dn"
           :src="url"
           :preload="audio.preload"
           @play="onPlay"
           @error="onError"
           @pause="onPause"
           @loadedmetadata="onLoadedmetadata">
      <!--<source src="url" type="audio/mpeg">-->
    </audio>
    <div>
      <!--<el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>-->
      <!--<input type="text" placeholder="输入单词" v-model="words" id="inp">-->

      <img @click="startPlayOrPause" src="../../assets/laba.png" alt="喇叭" width="20px" height="20px">{{audio.playing | transPlayPause}}
      <!--<el-button v-show="!controlList.noSpeed" type="text" @click="changeSpeed">{{audio.speed | transSpeed}}</el-button>-->

      <!--<el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag>-->

      <!--<el-slider v-show="!controlList.noProcess" v-model="sliderTime" :format-tooltip="formatProcessToolTip" @change="changeCurrentTime" class="slider"></el-slider>-->

      <!--<el-tag type="info">{{ audio.maxTime | formatSecond }}</el-tag>-->

      <!--<el-button v-show="!controlList.noMuted" type="text" @click="startMutedOrNot">{{audio.muted | transMutedOrNot}}</el-button>-->

      <!--<el-slider v-show="!controlList.noVolume" v-model="volume" :format-tooltip="formatVolumeToolTip" @change="changeVolume" class="slider"></el-slider>-->

      <!--<a :href="url" v-show="!controlList.noDownload" target="_blank" class="download" download>下载</a>-->
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      theUrl: {
        type: String,
        required: true,
      },
      // theSpeeds: {
      //   type: Array,
      //   default () {
      //     return [1, 1.5, 2]
      //   }
      // },
      theControlList: {
        type: String,
        default: ''
      }
    },

    name: 'VueAudio',
    data() {
      return {
        // url: this.theUrl || 'http://devtest.qiniudn.com/secret base~.mp3',
        url: this.theUrl,
        audio: {
          currentTime: 0,
          maxTime: 0,
          playing: false,
          muted: false,
          speed: 1,
          waiting: true,
          preload: 'auto'
        },

        // sliderTime: 0,
        // volume: 100,
        // speeds: this.theSpeeds,

        controlList: {
          // 不显示下载
          noDownload: false,
          // 不显示静音
          noMuted: false,
          // 不显示音量条
          noVolume: false,
          // 不显示进度条
          noProcess: false,
          // 只能播放一个
          onlyOnePlaying: false,
          // 不要快进按钮
          noSpeed: false
        }
      }
    },
    methods: {

      // readd(){
      //   // var w =document.getElementById(inp).innerHTML;
      //   // alert(w)
      //   // console.log(word)
      // },

      setControlList () {
        let controlList = this.theControlList.split(' ')
        controlList.forEach((item) => {
          if(this.controlList[item] !== undefined){
            this.controlList[item] = true
          }
        })
      },




      startPlayOrPause() {
        return this.audio.playing ? this.pausePlay() : this.startPlay()
      },
      // 开始播放
      startPlay() {
        this.$refs.audio.play()
      },
      // 暂停
      pausePlay() {
        this.$refs.audio.pause()
      },
      // 当音频暂停
      onPause () {
        this.audio.playing = false
      },
      // 当发生错误, 就出现loading状态
      onError () {
        this.audio.waiting = true
      },
      // 当音频开始等待
      onWaiting (res) {
        console.log(res)
      },
      // 当音频开始播放
      onPlay (res) {
        // console.log(res)
        this.audio.playing = true
        this.audio.loading = false

        if(!this.controlList.onlyOnePlaying){
          return
        }

        let target = res.target;

        let audios = document.getElementsByTagName('audio');

        [...audios].forEach((item) => {
          if(item !== target){
            item.pause()
          }
        })
      },
      // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
      // onTimeupdate(res) {
      //   // console.log('timeupdate')
      //   // console.log(res)
      //   this.audio.currentTime = res.target.currentTime
      //   this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
      // },
      // 当加载语音流元数据完成后，会触发该事件的回调函数
      // 语音元数据主要是语音的长度之类的数据
      onLoadedmetadata(res) {
        // console.log('loadedmetadata');
        // console.log(res);
        this.audio.waiting = false;
        this.audio.maxTime = parseInt(res.target.duration)
      }
    },
    filters: {
      formatSecond(second = 0) {
        return realFormatSecond(second)
      },
      transPlayPause(value) {
        return value ? '' : ''
      },
      // transMutedOrNot(value) {
      //   return value ? '放音' : '静音'
      // },


      //tts
      // transSpeed(value) {
      //   return '快进: x' + value
      // }

    },
    // created() {
    //   this.setControlList()
    // }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .main-wrap{
    padding: 10px 15px;
  }
  .slider {
    display: inline-block;
    width: 100px;
    position: relative;
    top: 14px;
    margin-left: 15px;
  }

  .di {
    display: inline-block;
  }

  .download {
    color: #409EFF;
    margin-left: 15px;
  }

  .dn{
    display: none;
  }

</style>
